import React, { useState, useEffect, createContext } from 'react';
import styles from './index.module.scss';

import WrapperPage from '@/components/WrapperPage';

import GeneralTab from './components/GeneralTab';
import InterfacesTab from './components/InterfacesTab';
import DhcpTab from './components/DhcpTab';
import RoutesTab from './components/RoutesTab';

import { ResponsiveGrid, Tag, Button, Tab, Message } from '@alifd/next';

import { formlizeTitle } from '@/utils/formlize';

// 获取api
import { getDeviceInfo, putDeviceInfo } from './services/deviceInfo.js';

const { Cell } = ResponsiveGrid;
const { Group: TagGroup } = Tag;

export const DeviceContext = createContext({});


const DeviceInfo = (props) => {
    const id = formlizeTitle(props.location.pathname);
    let [data,onData] = useState([]),
        [isConn, onConn] = useState(false),
        [device,onDevice] = useState({
            description: '',
            isApproved: false,
            name: '',
            interfaces: [],
            dhcp: [],
            staticroutes: []
        });
    
    useEffect(()=>{
        getDeviceInfo(id).then(result => {
            console.log('result', result);
            if(result.code == 200) {
                onData(result.msg);
                onConn(result.msg[0].isConnected)
                onDevice({
                    description: result.msg[0].description,
                    isApproved: result.msg[0].isApproved,
                    name: result.msg[0].name,
                    interfaces: result.msg[0].interfaces,
                    dhcp: result.msg[0].dhcp,
                    staticroutes: result.msg[0].staticroutes
                })
            }
        })
    },[]);

    const handleUpdate = () => {
        console.log('device', device);
        putDeviceInfo(id, device).then(result => {
            if(result.code == 200) {
                Message.success('Update Success')
            } else {
                Message.error('Update Error')
            }
        })
    }

    // tab选项卡配置
    const tabConfig = [
        {
            title: 'General',
            key: '1',
            content: <div className={styles['display-tab']}><GeneralTab onDevice={onDevice} rowData={data} /></div>
        },
        {
            title: 'Interfaces',
            key: '2',
            content: <div className={styles['display-tab']}><InterfacesTab onDevice={onDevice} rowData={data} /></div>
        },
        {
            title: 'DHCP',
            key: '3',
            content: <div className={styles['display-tab']}><DhcpTab onDevice={onDevice} rowData={data} /></div>
        },
        {
            title: 'Routes',
            key: '4',
            content: <div className={styles['display-tab']}><RoutesTab onDevice={onDevice} id={id} rowData={data} /></div>
        },
        {
            title: 'Policies',
            key: '5',
            content: <div className={styles['display-tab']}>Policies</div>
        },
        {
            title: 'Static Routes',
            key: '6',
            content: <div className={styles['display-tab']}>Static Routes</div>
        },
        {
            title: 'Statistics',
            key: '7',
            content: <div className={styles['display-tab']}>Statistics</div>
        },
        {
            title: 'Logs',
            key: '8',
            content: <div className={styles['display-tab']}>Logs</div>
        },
        {
            title: 'Packet Traces',
            key: '9',
            content: <div className={styles['display-tab']}>Packet Traces</div>
        },
        {
            title: 'Configuration',
            key: '10',
            content: <div className={styles['display-tab']}>Configuration</div>
        }
    ];
    return (
        <WrapperPage back path={props.location.pathname} history={props.history}>
            <div className={styles["info-content"]}>
                <ResponsiveGrid device="desktop" className={styles['content-filter']}>
                    <Cell colSpan={6}>
                        <span className={styles['button-zone']}>
                            <Button type="primary" onClick={handleUpdate}>Update Device</Button>
                        </span>
                    </Cell>
                    <Cell colSpan={6}>
                        <span className={styles['tag-zone']}>
                            <TagGroup>
                                <Tag size="small" type="normal" color={device.isApproved ? 'green' : 'red'}>
                                    {device.isApproved ? 'Approved' : 'Not Approved'}
                                </Tag>
                                <Tag size="small" type="normal" color={isConn ? 'green' : 'red'}>
                                    {isConn ? 'Connected' : 'Not Connected'}
                                </Tag>
                            </TagGroup>
                        </span>
                    </Cell>
                </ResponsiveGrid>
                <Tab className={styles['content-display']}>
                    {
                        tabConfig.map(item => {
                            return (
                                <Tab.Item title={item.title} key={item.key}>
                                    <DeviceContext.Provider value={device}>
                                        {item.content}
                                    </DeviceContext.Provider>
                                </Tab.Item>
                            )
                        })
                    }
                </Tab>
            </div>
        </WrapperPage>
    )
};

export default DeviceInfo;